<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择司机</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/bootstrap/bootstrap.min.css">
</head>
<body>
<div id="app">
    <div class="container">
        <el-form class="search-form">
            <el-form-item>
                <label>货物名称：</label>
                <el-input v-model="search.name" class="search-input"></el-input>
                <label>货物类型：</label>
                <el-select v-model="search.goodType" placeholder="" style="margin-right: 30px" clearable>
                    <el-option
                            v-for="item in search.goodsOptions"
                            :key="item.typeId"
                            :label="item.name"
                            :value="item.typeId">
                    </el-option>
                </el-select>
                <el-button type="primary" @click="getDriverIntentions()">搜索</el-button>
            </el-form-item>
        </el-form>
        <div class="list" v-for="item in goodsInf">
            <el-card class="box-card">
                <el-descriptions class="margin-top" :column="3" border>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-location-outline"></i>
                            物品名称
                        </template>
                        {{item.name}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-tickets"></i>
                            货物类型
                        </template>
                        <el-tag size="small">{{item.typeName}}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            发货地址
                        </template>
                        {{item.start}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            运输目的地
                        </template>
                        {{item.destination}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            价格要求
                        </template>
                        <span style="color: #EAAE3E;font-size: 18px">{{item.feesMin}} - {{item.feesMax}}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            发布时间
                        </template>
                        {{item.driverCreateTime1}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            司机姓名
                        </template>
                        <a style="text-decoration:none" @click="getById(item.driverId)">{{item.driverName}}</a>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            司机车辆类型
                        </template>
                        {{item.carName}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            司机车牌号
                        </template>
                        {{item.carNumber}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            司机备注
                        </template>
                        {{item.driverRemark}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            司机报价
                        </template>
                        <span style="color: #EAAE3E;font-size: 18px">￥{{item.fees}}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            订单状态
                        </template>
                        <el-tag type="warning">已有司机报价</el-tag>
                    </el-descriptions-item>
                </el-descriptions>

                <el-button type="success" size="small" class="button_click pull-right"
                           @click="addOrders(item.driverId,item.fees,item.intentionId, item.goodId)">选择司机
                </el-button>
            </el-card>
        </div>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                background
                :current-page="page.current"
                :page-sizes="[5, 10, 20, 40]"
                :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
                style="margin-bottom: 30px">
        </el-pagination>
    </div>
    <el-dialog
            title="司机个人信息"
            :visible.sync="dialogVisible"
            width="30%">
        <el-form :model="form" label-width="80px">
            <el-form-item label="姓名:">
                <lable>{{form.name}}</lable>
            </el-form-item>
            <el-form-item label= "电话:">
                <lable>{{form.telephone}} </lable>
            </el-form-item>
            <el-form-item label= "车型:">
                <el-select v-model="form.carId"  placeholder="" :disabled="true">
                    <el-option
                            v-for="item in carOptions"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label= "车牌号:">
                <lable>{{form.carNumber}} </lable>
            </el-form-item>
            <el-form-item label= "可运输类型:">
                <el-select v-model="form.transType" multiple placeholder="" :disabled="true">
                    <el-option
                            v-for="item in transOptions"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">确定</el-button>
  </span>
    </el-dialog>
</div>
<script src="../js/jquery-3.5.1.min.js"></script>
<script src="../js/vue-v2.6.11.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/common.js"></script>
<script src="../js/apiurls.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            dialogVisible: false,
            activeName: '1',
            goodsInf: [],
            search: {
                name: '',
                goodType: '',
                goodsOptions: []
            },
            form: {
                driverId:'',
                carNumber: '',
                carId: '',
                gender: '',
                name: '',
                telephone: '',
                transType:[],
            },
            carOptions:[],
            transOptions:[],
            page: {
                //当前页
                current: 1,
                //最大页数
                total: '',
                size: 10
            }
        },
        methods: {
            getDriverIntentions() {
                let that = this
                let data = {
                    "pageRequest": {
                        "current": that.page.current,
                        "size": that.page.size
                    },
                    name: that.search.name,
                    typeId: that.search.goodType
                }
                getPostData(apiUrls.driverIntention.selectCustomerIntention, data, 'post', function (data) {
                    if (data.msg === 'success') {
                        that.goodsInf = data.data.records
                        that.page.total = data.data.total
                    } else {
                        this.$message({
                            message: data.msg(),
                            type: 'error'
                        });
                    }
                })
            },
            getCarTypes() {
                let that = this
                let data = ''
                getPostData(apiUrls.carType.getCarTypes,data,'post',function (data) {
                    if (data.msg === 'success') {
                        let t = data.data
                        let type = new Array()
                        for (let i = 0; i < t.length; i++) {
                            type.push({
                                value: t[i].carId,
                                name: t[i].name
                            })
                        }
                        that.carOptions = type
                    } else {
                        that.$message({
                            message: "获取货物类型列表失败",
                            type: 'error'
                        });
                    }
                })
            },
            getInformation() {
                let that = this
                let data = ''
                getPostData(apiUrls.driver.getDriverInfo,data,'post',function (data) {
                    if (data.msg === 'success') {
                        that.form = data.data
                        let s = data.data.transType
                        let transType = s.split(',')
                        that.form.transType = transType
                    } else {
                        that.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                })
            },
            getById(id) {
                let that = this
                let data = {
                    "driverId": id
                }
                this.dialogVisible = true
                getPostData(apiUrls.driver.getDriverInfoById, data, 'post', function (result) {
                    if (result.code === 0) {
                        that.form = result.data
                        let s = that.form.transType
                        let s1 = s.split(',')
                        that.form.transType = s1
                    } else {
                        that.$message({
                            message: result.msg,
                            type: 'error'
                        });
                    }
                })
            },
            addOrders(driverId, fees, intentionId, goodId) {
                let that = this
                that.$confirm('您确定选择这位司机并支付' + fees + '元吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let data = {
                        "driverId": driverId,
                        "fees": fees,
                        "intentionId": intentionId,
                        "goodId": goodId
                    }
                    getPostData(apiUrls.orders.addOrders, data, 'post', function (result) {
                        if (result.msg === 'success') {
                            that.$message({
                                message: "生成订单",
                                type: 'success'
                            });
                            that.getDriverIntentions()
                        } else {
                            that.$message({
                                message: result.msg,
                                type: 'error'
                            });
                        }
                    })

                })

            },
            // 初始页currentPage、初始每页数据数pagesize和数据data
            handleSizeChange: function (size) {
                this.page.size = size;
                console.log(this.page.size)  //每页下拉显示数据
                this.getDriverIntentions()
            },
            handleCurrentChange: function (currentPage) {
                this.page.current = currentPage;
                console.log(this.page.current)  //点击第几页
                this.getDriverIntentions()
            },
            getGoodTypes() {
                let that = this
                let data = ''
                getPostData(apiUrls.goodType.getGoodTypes, data, 'post', function (data) {
                    if (data.msg === 'success') {
                        let t = data.data
                        let type = new Array()
                        for (let i = 0; i < t.length; i++) {
                            type.push({
                                value: t[i].typeId,
                                name: t[i].name
                            })
                        }
                        that.transOptions = type
                        that.search.goodsOptions = data.data
                    } else {
                        that.$message({
                            message: "获取货物类型列表失败",
                            type: 'error'
                        });
                    }
                })
            },
        },
        mounted() {
            this.getDriverIntentions()
            this.getGoodTypes()
            this.getCarTypes()
        }
    })
</script>
</body>
</html>